<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
// import { NDataTable, NButton, NCard, NInput, NGrid, NGi, NGridItem, NFlex, NVirtualList, NDialogProvider, useDialog, createDiscreteApi, treeDark, NModal, NFormItem,NSpace } from 'naive-ui'
import baseCard from '@/components/base-card/index.vue'
import baseTable from '@/components/base-table/index.vue'
import { useMenuRecordStore } from '@/stores/menuRecord'
import { useRouter } from 'vue-router';
import { addDays, isYesterday, isToday } from 'date-fns/esm'
import { NSlider } from 'naive-ui'



// console.log(isToday);

// const { dialog } = createDiscreteApi(["dialog"])

const value = ref(addDays(Date.now(), 1).valueOf());
const audioRef = ref<any>(null)
const transcript = ref('');
const contentBoxRef = ref(null)
const calendarRef = ref(null)

// const marks = ref({
//     0: '0',
//     4.17: '1',
//     8.34: '2',
//     12.51: '3',
//     16.68: '4',
//     20.85: '5',
//     25.02: '6',
//     29.19: '7',
//     33.36: '8',
//     37.53: '9',
//     41.07: '10',
//     45.87: '11',
//     50.04: '12',
//     54.21: '13',
//     58.38: '14',
//     62.55: '15',
//     66.72: '16',
//     70.89: '17',
//     75.06: '18',
//     79.23: '19',
//     83.04: '20',
//     87.57: '21',
//     91.74: '22',
//     95.91: '23',
//     100.08: '24',
// })


const valuess = ref(50)
// const collapseName = ref('1')

// function handleUpdateValue( _: number,{ year, month, date }: { year: number, month: number, date: number } ) {
//         message.success(`${year}-${month}-${date}`)
//       }

// console.log(calendarRef);

</script>
<template>
    <baseCard style=" min-width: 1920px; " title="我的工作台" icon="#icon-wodericheng-">
        <div class="workbenches_lay">
            <div class="lay_left">
                <n-collapse default-expanded-names="1"  accordion>
                    <n-collapse-item title="日程计划" name="1">
                        <n-space justify="center">
                            <div class="mark_box">
                                <div class="mark_box_ul" style="background-color: #f11b1b;"></div>
                                <span style="margin-left: 5px;">重要事项 </span>
                            </div>
                            <div class="mark_box">
                                <div class="mark_box_ul" style="background-color: #004cff;"></div>
                                <span style="margin-left: 5px;">关建里程碑</span>
                            </div>
                            <div class="mark_box">
                                <div class="mark_box_ul" style="background-color: #ffb300;"></div>
                                <span style="margin-left: 5px;">重要节点</span>
                            </div>
                            <div class="mark_box">
                                <div class="mark_box_ul" style="background-color: #00fff1;"></div>
                                <span style="margin-left: 5px;">领导指派</span>
                            </div>
                        </n-space>
                        <n-calendar ref="calendarRef" class="nCalendar" style="height:100%;" v-model:value="value"
                            #="{ year, month, date }">
                            <n-badge dot :value="value" :max="0" />
                        </n-calendar>
                    </n-collapse-item>
                    <n-collapse-item title="重要事项" name="2">
                        重要事项
                    </n-collapse-item>
                </n-collapse>
            </div>
            <div class="lay_center">
                <n-collapse default-expanded-names="1"  accordion>
                    <n-collapse-item title="今日任务" name="1">
                        <n-timeline>
                            <n-timeline-item type="success">
                                <n-gradient-text type="info">
                                    参加集团会议
                                </n-gradient-text>
                            </n-timeline-item>
                            <n-timeline-item type="success">
                                <n-gradient-text type="danger">
                                    拜访客户
                                </n-gradient-text>
                            </n-timeline-item>
                            <n-timeline-item type="success">
                                <n-gradient-text type="danger">
                                    拟定销售合同
                                </n-gradient-text>
                            </n-timeline-item>
                            <n-timeline-item type="success">
                                <n-gradient-text type="warning">
                                    汇报工作
                                </n-gradient-text>
                            </n-timeline-item>
                            <n-timeline-item type="success">
                                <n-gradient-text type="info">
                                    …………………………………………
                                </n-gradient-text>
                            </n-timeline-item>
                            <n-timeline-item type="default">
                                <n-gradient-text type="info">
                                    …………………………………………
                                </n-gradient-text>
                            </n-timeline-item>
                        </n-timeline>
                    </n-collapse-item>
                    <n-collapse-item title="AI智能工作助手" name="2">

                    </n-collapse-item>

                </n-collapse>
            </div>
            <div class="lay_right">
                <n-collapse default-expanded-names="1"  accordion>
                    <n-collapse-item title="重要文件" name="1">

                    </n-collapse-item>
                    <n-collapse-item title="通知" name="2">

                    </n-collapse-item>
                    <n-collapse-item title="消息" name="3">

                    </n-collapse-item>
                </n-collapse>
            </div>
        </div>
    </baseCard>
</template>

<style src="./index.scss" scoped></style>
<style lang="scss" scoped>
.workbenches_container {
    display: flex;
    flex-direction: row;
    height: 100%;
}

.calendar_box {
    border: solid 1px #eee;
    height: 100%;
    width: 70%;
    box-sizing: border-box;
    padding: 10px;
}

.mark_box {
    height: 10px;
    line-height: 10px;
    display: flex;
}

.mark_box_ul {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #f11b1b;
}

.calendar_slot_default {
    border: none;
    height: 100%;
    text-align: center;
    height: 80px;
    padding: 15px;
}

.calendar_slot_default_ul {
    box-sizing: border-box;
    color: black;
    border-radius: 5px;
    height: 26px;
    width: 132px;
    overflow: hidden;
}

.calendar_slot_default_ul:nth-child(1) {
    margin-bottom: 2px;
}
</style>
